import React from 'react';
import { Image, StyleSheet, View, DeviceEventEmitter } from 'react-native';
import { unitWidth } from '../constants/AdapterUtil';
import * as Animatable from 'react-native-animatable';
import Colors from '../constants/Colors';

//tabbar的图标，不用icon，直接设置图片
export class TabBarImage extends React.Component {
    render() {
        return (
            <View style={styles.tabBottomItem}>
                <Image source={this.props.focused ? this.props.hasSelect : this.props.noSelect}
                    style={{ height: 20 * unitWidth, width: 27 * unitWidth }} resizeMode='contain' />
                {/* <Text style={{ color: this.props.focused ? '#009d1f' : '#000000', marginTop: 5 }} >{this.props.title}</Text> */}
            </View>
        );
    }
}

//有动画的Tabbar，Tabbar页面那里加上下面的代码
// tabBarOnPress: (options) => {
//     DeviceEventEmitter.emit('tabClick', '');
//     options.defaultHandler();
// },
// tabBarOnLongPress: (options) => {
//     return
// },
export class TabBarAnimationImage extends React.Component {

    componentDidMount() {
        this.subscription = DeviceEventEmitter.addListener('tabClick', (text) => {
            if (this.props.focused) {
                this.refs.view.bounceIn(800).then(endState => console.log(endState.finished ? 'bounce finished' : 'bounce cancelled'));
            }
        })
    }

    移除DeviceEventEmitter
    componentWillUnmount() {
        // 移除
        this.subscription.remove();
    }

    render() {
        return (
            <Animatable.View ref='view' style={styles.tabBottomItem} useNativeDriver={true}>
                <Image source={this.props.focused ? this.props.hasSelect : this.props.noSelect}
                    style={{ height: 20 * unitWidth, width: 27 * unitWidth }} resizeMode='contain' />
                {/* <Text style={{ color: this.props.focused ? '#009d1f' : '#000000', marginTop: 5 }} >{this.props.title}</Text> */}
            </Animatable.View>
        );
    }
}

//tabbar的图标，不用icon，直接设置图片
export default class TabBarImage2 extends React.Component {
    render() {

        let source = this.props.focused ? this.props.hasSelect : this.props.noSelect

        return (
            <View style={[styles.tabBottomItem, {}]}>
                <Image source={source}
                    style={{ position: 'absolute', top: 2 * unitWidth, height: 35 * unitWidth, width: 35 * unitWidth }} resizeMode='contain' />
            </View>
        );
    }
}

export class TabBarImageCenter extends React.Component {
    render() {

        let source = this.props.focused ? this.props.hasSelect : this.props.noSelect

        return (
            <View style={[styles.tabBottomItem, { marginTop: -13 * unitWidth }]}>
                <View style={{
                    width: 52 * unitWidth, height: 52 * unitWidth, alignItems: 'center', justifyContent: 'center', position: 'absolute', top: -3 * unitWidth,
                    borderRadius: 26 * unitWidth, backgroundColor: Colors.white
                }}>
                    <Image source={source}
                        style={{ height: 41 * unitWidth, width: 41 * unitWidth }} resizeMode='contain' />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    tabBottomItem: {
        flex: 2,
        flexDirection: 'column',
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
})